<template>
  <div>
    <Header :index="$route.path" />
    <div class="shoplist">
      <span> 购物清单 </span>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="description"
        label="商品信息"
        width="280"
        align="center"
      >
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="" />
          <div class="middletext">{{ scope.row.description }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" width="180"> </el-table-column>
      <el-table-column prop="num" label="数量"> </el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">
          {{ scope.row.num * scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="DeleteGoods(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="totalprice">
      总价:<span>￥{{ total }}</span>
      <el-button type="primary" round @click="payfor">现在结算</el-button>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
    };
  },
  computed: {
    // mapState 用于拿取指定成员
    ...mapState("shopcart", ["goods"]),
  },
  created() {
    this.$http.get("/v1/home/getCart").then((res) => {
      this.tableData = res.data.data.cartList;
      this.total = res.data.data.totalPrice;
    });
  },
  methods: {
    DeleteGoods(id) {
      // console.log(this.goods[0]);
      // 删除功能待补充
      // console.log(id);
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/v1/home/deleteCart", {
              id: id,
            })
            .then((res) => {
              console.log(res);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 重新获取数据
          this.$http.get("/v1/home/getCart").then((res) => {
            this.tableData = res.data.data.cartList;
            this.total = res.data.data.totalPrice;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    payfor() {
      this.$message.success("结算成功");
    },
  },
  components: {
    Header,
  },
};
</script>
<style  lang='less' scoped>
.shoplist {
  margin-top: 20px;
  margin-left: 10px;
}
.el-table /deep/ th {
  text-align: center;
}
.el-table--enable-row-transition /deep/ .el-table__body td {
  text-align: center;
}
img {
  width: 80px;
}
.el-table /deep/.cell {
  text-align: left;
}
.middletext {
  position: absolute;
  left: 90px;
  top: 40px;
}
.totalprice {
  text-align: right;
  margin-right: 100px;
}
.totalprice span {
  font-size: 20px;
  color: rgba(228, 57, 60);
  font-weight: 800;
  margin-right: 50px;
}
</style>